<!doctype html>
<html>
<head>
	<title>^js-42-田banner</title>
	<meta charset="UTF-8"/>
	<style>
	
	*{
		margin:0;
		padding:0;
	}
		a{
			text-decoration:none;/*去掉a标签超链接的下划线*/
		}
		ul li{
			list-style:none;/*去掉ul列表前面的点*/
			width:100%;height:100%;
			position: absolute;
			left:0;
			top:0;
			display:none;
		}
		.on{
			display:block;
		}
		body{
			background-color:#000;
		}
		#box{
			position: relative;
			width:1000px;
			height:500px;
			margin:60px auto;
			background-color:pink;
		}
		.po{
			position:relative;

		}
		#box p{
			position: absolute;
			width:36px;
			height:36px;
			background: url("img/icon.png") no-repeat ;
			cursor: pointer;
		}
		#box .le{
			top:250px;
			left:-36px;
			background-position: -6px -6px
		}
		#box .ri{
			top:250px;
			right:-36px;
			background-position: -10px -66px
		}
		img{
			width:1000px;
			height:500px;
		}
	</style>
</head>
<body>
	<audio src="bgm/纯音乐 - 转职画面.mp3" controls="controls"  autoplay="autoplay" loop="loop"></audio>
	<div id="box"><!--banner-->
		
		<ul class="po">
			<li class="on"><img src="img/erjue (1).jpg" alt=""></li>
			<li><img src="img/erjue (2).jpg" alt=""></li>
			<li><img src="img/erjue (3).jpg" alt=""></li>
			<li><img src="img/erjue (4).jpg" alt=""></li>
			<li><img src="img/erjue (5).jpg" alt=""></li>
			<li><img src="img/erjue (6).jpg" alt=""></li>
			<li><img src="img/erjue (7).jpg" alt=""></li>
			<li><img src="img/erjue (8).jpg" alt=""></li>
			<li><img src="img/erjue (9).jpg" alt=""></li>
			<li><img src="img/erjue (10).jpg" alt=""></li>
			<li><img src="img/erjue (11).jpg" alt=""></li>
			<li><img src="img/erjue (12).jpg" alt=""></li>
			<li><img src="img/erjue (13).jpg" alt=""></li>
			<li><img src="img/erjue (14).jpg" alt=""></li>
			<li><img src="img/erjue (15).jpg" alt=""></li>
			<li><img src="img/erjue (16).jpg" alt=""></li>
			<li><img src="img/erjue (17).jpg" alt=""></li>
		</ul>
		<p class="le"></p>
		<p class="ri"></p>
	</div>
	<script>
		var oLi=document.querySelectorAll("li"),
			length=oLi.length,
			num=0;

			function fn(){
				for(var i=0;i<length;i++){
					oLi[i].className="";//让所有的类名清空
				}
			}
			var _Time=setInterval(function(){
				if(num>length-1){
					fn();
				}
				if(num>length-1){
					console.log(num);
					num=0;
				}
				oLi[num].className="on";
				num++;
			},1000);
				/*num++;
				if(this.bool){
					for(var i=0;i<length;i++){
						oLi[i].bool=true;
					}
					oLi[num].className="on";
					this.bool=!this.bool;
				}else{
					if(num-2>length){
						num=0;
					}
					oLi[num].className="";
					this.bool=!this.bool;
				}*/
	</script>
</body>

</html>